import React, { Component } from "react";
import {
  BasicLayout,
  BasicLayoutSearch,
} from "../../../components/BasicLayout";
import QRCode from "qrcode.react";
import {
  Button,
  Col,
  Row,
  Progress,
  Tag,
  Steps,
  PageHeader,
  Divider,
  Badge,
  Form,
} from "antd";
import {
  openModalMessage,
  TableCustomize,
  compareDate,
  compareString,
  compareNum,
  BasicPagination,
} from "../../../components/TableCustomize";
import { Link } from "react-router-dom";
import * as StayGrantService from "../../../axios/ERPDeliveryRecord";
import { withRouter } from "react-router";
const { Step } = Steps;
class Particulars extends Component {
  state = {
    dataParticular: {},
    percent: null,
    pageNum: 1,
    pageSize: 100,
    total: 0,
    columns: [
      {
        title: "序号",
        dataIndex: "serialNumber",
        render: (text, record, index) => (
          <div style={{ display: "flex" }}>
            <div>
              {(this.state.pageNum - 1) * this.state.pageSize + index + 1}
            </div>
          </div>
        ),
      },
      {
        title: "物料编码",
        dataIndex: "partCode",
        sorter: (a, b) => compareNum(a.partCode, b.partCode),
      },
      {
        title: "图号",
        dataIndex: "paperCode",
        sorter: (a, b) => compareNum(a.paperCode, b.paperCode),
      },
      {
        title: "装配组别",
        dataIndex: "assemblyGroup",
      },
      {
        title: "物料名称",
        dataIndex: "partName",
      },
      {
        title: "物料规格",
        dataIndex: "partSpec",
      },
      {
        title: "仓库",
        dataIndex: "storeName",
        sorter: (a, b) => compareString(a.storeName, b.storeName),
      },
      {
        title: "发放数量",
        dataIndex: "takeNumber",
        sorter: (a, b) => compareNum(a.takeNumber, b.takeNumber),
      },
      {
        title: "ERP库存数量",
        dataIndex: "erpNum",
        sorter: (a, b) => compareNum(a.erpNum, b.erpNum),
      },
      {
        title: "结果",
        dataIndex: "status",
        sorter: (a, b) => compareString(a.status, b.status),
        render: (text) =>
          text == "已通过" ? (
            <Badge
              color="green"
              text={<span style={{ color: "green" }}>{text}</span>}
            />
          ) : text == "未通过" ? (
            <Badge
              status="error"
              text={<span style={{ color: "red" }}>{text}</span>}
            />
          ) : (
            ""
          ),
      },
    ],
    dataSource: [],
  };
  componentDidMount() {
    this.getData();
  }
  componentWillUnmount() {
    this.setState = () => {
      return;
    };
  }
  getData = (pageNum = 1, pageSize = 100) => {
    let data = this.props?.location?.data?.details || {};
    let searchItem = { erpRecordId: data.id };
    searchItem.pageNum = pageNum;
    searchItem.pageSize = pageSize;
    this.setState({ dataParticular: data });
    StayGrantService.getByRecordId(searchItem).then((value) => {
      if (value.data.code !== 200) {
        openModalMessage("error", value.data.msg);
        return;
      }
      this.setState({
        dataSource: value.data.data,
        pageNum,
        pageSize,
        total: value.data.total,
      });
    });
  };
  render() {
    const {
      dataParticular,
      percent,
      columns,
      dataSource,
      loading,
      pageNum,
      pageSize,
      total,
    } = this.state;
    return (
      <div>
        <BasicLayoutSearch>
          <PageHeader
            style={{ padding: "4px 24px" }}
            onBack={() => window.history.back()}
            title={"查看详情"}
          ></PageHeader>
          <Divider />
          <Row gutter={24}>
            <Col
              span={6}
              style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                height: "60px",
              }}
            >
              <div>批 号：{dataParticular.batchNo}</div>
              <div>部 门：{dataParticular.departName}</div>
            </Col>
            <Col
              span={6}
              style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                height: "60px",
              }}
            >
              <div>机 型 ：{dataParticular.model}</div>
              <div>班 组 ：{dataParticular.groupName}</div>
            </Col>
            <Col
              span={6}
              style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                height: "60px",
              }}
            >
              <div>项 数 ：共 {dataParticular.total} 项</div>
              <div>机 位 ：{dataParticular.seat}</div>
            </Col>
            <Col
              span={6}
              style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                height: "60px",
              }}
            >
              <div>领 料 单 ：{dataParticular.acceptCode}</div>
              <div>出 库 单 ：{dataParticular.warehouseCode}</div>
            </Col>
            {dataParticular.acceptCode ? (
              <QRCode
                value={dataParticular.acceptCode} //value参数为生成二维码的链接
                size={60} //二维码的宽高尺寸
                fgColor="#000000" //二维码的颜色
              />
            ) : null}
          </Row>
        </BasicLayoutSearch>
        <BasicLayoutSearch>
          <TableCustomize
            rowSelection={null}
            columns={columns}
            rowKey={(record) => record.id}
            dataSource={dataSource || []}
            pagination={false}
            loading={loading}
            allowDrafting={true}
            onExpand={(expanded, record) => this.onExpand(expanded, record)}
            rowClassName={(record, index) => {
              return [
                "editable-row",
                index % 2 === 0 ? "editable-row" : "editable-row12",
              ];
            }}
          />
          <BasicPagination
            pageNum={pageNum}
            pageSize={pageSize}
            total={total}
            loadData={this.getData}
          />
        </BasicLayoutSearch>
      </div>
    );
  }
}
export default Form.create()(withRouter(Particulars));
